<template>
  <div class="container shadow">
    <i class="icon-search opacity-80" />
        <input type="text" placeholder="在Pokemon宝可梦百科搜索"
        v-model="inputContent" @keypress.enter="getInfo(inputContent)">
  </div>
</template>

<script>
import axios from "axios"

export default {
    name: 'PokemonInput',
    data(){
        return{
            inputContent: "",
        }
    },
    props:[
        'setInfo',
    ],
    methods:{
        /* input框按回车时触发 */
        getInfo(input){
            if(!input){
                this.setInfo(null);
                return;
            }

            //隐藏模式
            if(input=='我是谁'){
                /* 向远程服务器发送Get请求，获取宝可梦数据 */
                axios({
                    method: "GET",
                    url: "//localhost:8080/pokemon/detail",
                    params:{
                        index: parseInt(Math.random()* 1007 + 1),
                    }
                }).then(
                    //成功拿到数据
                    response => {
                        console.log(response.data);
                        /* 调用父组件经由props传下来的方法
                        告诉父组件搜索的结果 */
                        this.setInfo(response.data);
                        //跳转路由至“我是谁”界面
                        this.$router.push({
                            path: '/whoAmI',
                        });
                    },
                    //请求失败
                    error => {console.log(error);},
                )
            }
            else{
                /* 向远程服务器发送Get请求，获取宝可梦数据 */
                axios({
                    method: "GET",
                    url: "//localhost:8080/pokemon/detail",
                    params:{
                        nameZh: input,
                    }
                }).then(
                    //成功拿到数据
                    response => {
                        console.log(response.data);
                        /* 调用父组件经由props传下来的方法
                        告诉父组件搜索的结果 */
                        this.setInfo(response.data);
                        //跳转路由至搜索结果界面
                        this.$router.push({
                            path: '/search',
                        });
                    },
                    //请求失败
                    error => {console.log(error);},
                )
            }       
        }
    },
}
</script>

<style lang="less" scoped>
@height: 50px;
@width: 600px;
@font-size: @height * 0.35;

.container {
    height: @height;
    width: @width;

    border-radius: @height;

    line-height: @height;
    padding-left: 20px;

    background-color: white;
    opacity: 0.4;
    transition: opacity 1s;
}

.container:hover {
    opacity: 1;
    transition: opacity 1s;
}


input {
    height: 70%;
    width: 80%;

    margin-left: 10px;

    font-size: @font-size;
    outline: none;
    border: 0;
}

i {
    vertical-align: middle;
}


@media screen and (max-width: 600px) {
    .container{
        width: 80vw;
        margin-left: auto;
        margin-right: auto;
    }
}
</style>